<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="5">
        <div class="system-title">系统分类</div>
        <div
          v-for="(i, k) in systemList"
          :key="k"
          class="system-item"
          :class="{ active: i.id == queryParams.systemId }"
          @click="changeSystem(i)"
        >
          {{ i.name }}
        </div>
      </el-col>
      <el-col :span="19">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          inline
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="设备" prop="deviceId">
            <el-select
              v-model="queryParams.deviceId"
              placeholder="请选择设备名称"
              clearable
              filterable
              style="width: 240px"
            >
              <el-option
                v-for="i in deviceList"
                :key="i.id"
                :label="i.name"
                :value="i.id"
              />
            </el-select>
          </el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">
            搜索
          </el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleExport"
            >
              导出
            </el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
        </el-row>
        <el-tabs v-model="queryParams.type" @tab-click="getList">
          <el-tab-pane
            v-for="i in dictList"
            :key="i.dictValue"
            :label="i.dictLabel"
            :name="i.dictValue"
          />
        </el-tabs>
        <div v-for="i in dataList" :key="i.systemId" style="margin-bottom: 20px">
          <el-table :data="i.inspectionVOList" :span-method="mergeCall">
            <el-table-column :label="i.systemName" align="center">
              <el-table-column
                prop="deviceName"
                label="设备名称"
                align="center"
                min-width="100"
              />
              <el-table-column
                prop="inspectionCycleName"
                label="检查周期"
                align="center"
                width="100"
              />
              <el-table-column label="检查标准" align="center" width="100">
                <template slot-scope="scope">
                  {{ typeName(scope.row.type) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="deviceItemName"
                label="检查项"
                align="center"
                min-width="100"
              />
              <el-table-column
                prop="specification"
                label="测试方法和要求"
                align="center"
                min-width="200"
              />
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { listSystem, listByInspection } from "@/api/device/system";
import { getDeviceList } from "@/api/system/ai";
import { getDicts } from "@/api/system/dict/data";
export default {
  data() {
    return {
      queryParams: {
        systemId: null, // 系统id
        deviceId: null, // 设备id
        type: null, // 标准
      },
      systemList: [], // 系统列表
      deviceList: [], // 设备列表
      dictList: [], // 标准列表
      dataList: [], // 巡检频次表列表
      showSearch: true, // 显示搜索条件
    };
  },
  created() {
    this.getSystemList();
    this.getDevices();
    this.getDicts();
  },
  methods: {
    // 获取系统列表
    getSystemList() {
      listSystem({
        pageNum: 1,
        pageSize: 1000,
      }).then((res) => {
        if (res.code == 200) {
          let list = res.rows;
          list.unshift({
            id: null,
            name: "全部",
          });
          this.systemList = list;
        }
      });
    },
    // 切换系统
    changeSystem(val) {
      this.queryParams.systemId = val.id;
      this.queryParams.deviceId = null;
      this.getDevices();
      this.getList();
    },
    // 设备列表
    getDevices() {
      getDeviceList({
        pageNum: 1,
        pageSize: 1000,
        systemId: this.queryParams.systemId,
      }).then((res) => {
        this.deviceList = res.rows;
      });
    },
    // 标准列表
    getDicts() {
      getDicts("sys_check_standard").then((res) => {
        this.dictList = res.data;
        if (res.data?.length) {
          this.queryParams.type = res.data[0].dictValue;
          this.getList();
        }
      });
    },
    // 标准中文名称
    typeName(val) {
      let row = this.dictList?.find((i) => i.dictValue == val);
      return row ? row.dictLabel : "";
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.getList();
    },
    // 获取数据列表
    getList() {
      listByInspection(this.queryParams).then((res) => {
        let list = res.data;
        list.forEach((i) => {
          let current = "";
          i.inspectionVOList.forEach((v, k) => {
            let cellNum = this.countField(v.deviceName, i.inspectionVOList, "deviceName");
            if (cellNum > 1 && current == "") {
              current = v.deviceName;
            } else if (cellNum > 1 && current == v.deviceName) {
              cellNum = 0;
            } else if (cellNum > 1 && current != v.deviceName) {
              current = v.deviceName;
            }
            v.cellNum = cellNum;
          });
        });
        this.dataList = list;
        console.log(this.dataList);
      });
    },
    // 统计次数
    countField(str, data, field) {
      let count = 0;
      data.forEach((i) => {
        if (typeof i[field] == "string" && str == i[field]) {
          count++;
        }
      });
      return count;
    },
    // 导出
    handleExport() {
      this.download('/manager/device/exportList', {
        ...this.queryParams
      }, `巡检频次表_${new Date().getTime()}.xlsx`)
    },
    // 合并单元格
    mergeCall({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return {
          rowspan: row.cellNum,
          colspan: row.cellNum == 0 ? 0 : 1,
        };
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.system-title {
  padding: 10px;
}
.system-item {
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: all 0.3s;
  font-size: 14px;
  &:hover {
    cursor: pointer;
    border: 1px solid #409eff;
  }
}
.active {
  background-color: #e7eef7;
  color: #409eff;
}
</style>
